<template>
  <div class="container">
    <el-dialog
      title="选择考试"
      ref="proctDialog"
      :visible.sync="scoringVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="650px"
      top="200px"
    >
      <el-row>
        <el-col>
          <span style="display: block; margin: 0px 0 0px 0">请选择要批阅的考试：</span
          ><br />
          <el-select
            v-model="choseExam"
            filterable
            placeholder="请选择"
            style="width: 600px"
          >
            <el-option
              v-for="item in exams"
              :key="item.examUuid"
              :label="item.examName"
              :value="item.examUuid"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-col
          ><el-button
            type="primary"
            :disabled="choseExam === '' || choseExam === null || choseExam === undefined"
            @click="beginScoring"
            >开始阅卷</el-button
          ></el-col
        >
      </el-row>
    </el-dialog>

    <el-row :gutter="60">
      <el-col :span="12">
        <div>
          <el-tag size="medium" type="primary" style="margin-bottom: 10px">题目：</el-tag>
          <p>&nbsp;&nbsp;{{ tocheck.titleDetail }}</p>
        </div>
        <div style="margin-top: 20px">
          <el-tag size="medium" type="primary" style="margin-bottom: 10px"
            >学生作答：</el-tag
          >
          <div style="height: 295px; overflow: hidden; border-bottom: 1px solid #ccc">
            <quill-editor ref="editor" :styles="editorStyles"></quill-editor>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <el-tag size="medium" type="primary" style="margin-bottom: 10px"
            >参考答案：</el-tag
          >
          <textarea style="width: 565px; height: 225px" v-model="tocheck.questAnswer">
          </textarea>
        </div>
        <div style="margin-top: 20px">
          <el-col style="padding-left: 0px">
            <el-tag size="medium">分数：</el-tag>
          </el-col>
          <el-col style="padding-left: 0px; margin-top: 5px">
            <el-input type="text" v-model="checked.score" style="width: 100px"></el-input>
            <el-tag
              size="medium"
              type="warning"
              style="font-size: 15px; margin-left: 30px"
              >{{ "题目分值：" + tocheck.questScore }}</el-tag
            >
          </el-col>
        </div>
        <div>
          <el-col style="padding-left: 0px; margin-top: 10px">
            <el-button type="primary" @click="submitCheck">提 交</el-button>
            <el-button type="info" @click="getOne">下一题</el-button>
            <el-tag size="medium" style="margin-left:20px">剩余总题数：{{tocheck.total}}</el-tag>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import QuillEditor from "../common/QuillEditor.vue";
var _this;
export default {
  components: { QuillEditor },
  data() {
    return {
      choseExam: "",
      exams: [],
      scoringVisible: true,
      query: {
        workType: 2,
        fkexamName: "",
      },
      editorStyles: {
        height: "250px",
      },
      tocheck: {},
      checked: {
        id: 0,
        score: "",
      },
    };
  },
  methods: {
    getExams() {
      this.$post("/examwork/getexams", this.query).then((res) => {
        if (res.code === 0) {
          this.exams = res.data.filter(item=>{
            return item.status === 2
          })
        } else {
          console.log(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    beginScoring() {
      this.getOne();
      this.scoringVisible = false;
    },
    getOne() {
      _this.tocheck = {};
      this.checked.score = ''
      this.$post("/stuanswer/querystuanswer", { examUuid: this.choseExam }).then(
        (res) => {
          if (res.code === 0) {
            this.tocheck = res.data;
            _this.$refs.editor.answerHtml = res.data.userAnswer;
          } else {
            console.log(res.msg);
            this.$message.error("获取待批阅题目失败！");
          }
        }
      );
    },
    submitCheck() {
      if (this.checked.score === "") {
        this.$message.error("请填写分数！");
        return;
      }
      if (this.checked.score > this.tocheck.questScore) {
        this.$message.error("得分不能超过题目分数！");
        return;
      }
      this.checked.id = this.tocheck.id;
      this.$post("/stuanswer/submitcheck", this.checked).then((res) => {
        if (res.code === 0) {
          this.$message.success("提交成功！");
        } else {
          this.$message.success("提交失败！");
        }
      });
    },
  },
  created() {
    this.getExams();
    _this = this;
  },
  computed: {},
  watch: {

  },
  mounted() {},
};
</script>
<style scoped></style>
